<template>
	<view>
		<view class="content-box">
			<view class="item" style="display:flex" :style="{justifyContent:index%2 == 0?'flex-start':'flex-end'}"  v-for="(item, index) in replyList" :key="index">
				<image style="width:30px;height:30px" v-if="index%2 == 0 " :src="index%2 == 0 ? '../../static/logo.png' : '../../static/icon_0.svg'"></image>
				<view :style="{background:index%2 == 0?'#eee':'#68de7c'}" style="max-width:500rpx;background:#eee;padding:5px;border-radius: 5px;">{{item}}</view>
				<image  style="margin-left: 5px;width:30px;height:30px" v-if="index%2 != 0 " :src="index%2 == 0 ? '../../static/logo.png' : '../../static/icon_0.svg'"></image>
			</view>
		</view>
		<view style="width: 100%; height: 110rpx;">
			
		</view>
		<view class="input-box">
			<uni-easyinput  v-model="content" placeholder="请输入内容" />
			<button type="primary" @click="getContent(content)">发送</button>
		</view>
	</view>
</template>

<script>
	const chat = uniCloud.importObject("ai-demo")
	export default {
		data() {
			return {
				content: null,
				replyList: ['你好！很高兴见到你，有什么我可以帮助你的吗？'],
			}
		},
		onLoad() {

		},
		methods: {
			getContent(e){
				//记得改下云函数的超时时间，一般20s,30s就行了
				this.replyList.push(e)
				this.content = null
				chat.chatAi(e).then((res)=>{
					this.replyList.push(res.reply)
				}).catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.input-box{
		// @include flex($between);
		width: 100%;
		position: fixed;
		bottom: 10rpx;
	}
	
	.content-box{
		margin-top: 30rpx;
		.item{
			margin-top: 25rpx;
			margin-left: 30rpx;
			// @include flex();
			flex-wrap: nowrap;
			align-items: flex-start;
			image{
				width: 50rpx !important;
				height: 50rpx !important;
				border-radius: 50rpx;
				margin-right: 15rpx;
			}
			.iText{
				max-width: 500rpx;
				border-radius: 30rpx;
				padding: 10rpx 30rpx;
				background-color: #eee;
			}
			&:nth-child(even){
				// justify-content: flex-end;
			}
		}
	}
</style>
